<template>
  <div class="container">
    <el-dialog
      :title="showTitle"
      :visible.sync="dialogVisible"
      width="30%"
      @close='closeDialog'
    >
      <span>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="所属学科" prop="subjectID">
            <el-select v-model="form.subjectID" placeholder="请选择">
              <el-option
              v-for='item in list'
              :key='item.id'
              :value="item.value"
              :label="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签名称" prop="tagName">
            <el-input v-model="form.tagName"></el-input>
          </el-form-item>
        </el-form>
      </span>
       <template #footer>
        <div style="text-align: right;">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/tags.js'
// import { simple } from '@/api/hmmm/subjects.js'
export default {
  name: 'tagsAdd',
  props: {
    list: {
      type: Array,
      require: true
    }
  },
  data () {
    return {
      form: {
        subjectID: '',
        tagName: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'change' }
        ],
        tagName: [
          { required: true, message: '请输入目录名称', trigger: ['blur', 'change'] },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: ['blur', 'change'] }
        ]
      },
      // list: []
      // 弹窗的显示与隐藏
      dialogVisible: false
    }
  },
  computed: {
    showTitle () {
      return this.form.id ? '修改目录' : '添加目录'
    }
  },
  methods: {
    // 关闭弹框
    closeDialog () {
      // this.$emit('update:dialogVisible', false)
      this.dialogVisible = false
      this.$refs.form.resetFields()
      this.form = {
        subjectID: '',
        tagName: ''
      }
    },
    // 点击确认添加数据
    handleSubmit (id) {
      this.$refs.form.validate(async (flag) => {
        if (!flag) return
        // console.log('可以发送请求了')
        if (this.form.id) {
          // 编辑操作
          await update(this.form)
          this.$message.success('修改标签成功')
        } else {
          // 调用接口
          await add(this.form)
          // console.log(res, '===========')
          // 提示用户:
          this.$message.success('新增标签成功')
        }

        // 通知父组件更新列表数据
        this.$emit('tags-add', this.form)
        // 关闭弹框
        this.closeDialog()
      })
    }
  }
}
</script>

<style scoped  lang="scss">
.container{
  :deep(.el-input__inner){
  width: 250px;}
  // ::v-deep{
  //   .el-input__inner{
  //     width: 250px;
  //   }
  // }
}

</style>
